<script setup lang="ts">
import {ref, reactive, onBeforeMount, computed, watch} from 'vue'
import {ElMessage} from 'element-plus'
import {FromItem} from '@/components/dFrom/dFrom'
import useCLodop from '@/store/cLodop'
import {getPrintList, CLodopStatus, showCLodopTips} from '@/util/cLodop'

import dDialog from '@/components/dDialog/dDialog.vue'
import dFrom from '@/components/dFrom/dFrom.vue'
import {SeleteData} from '@/api/config'

const cLodopStore = useCLodop.setup().store

//是否显示
defineProps({
  //显示
  showDialog: {
    type: Boolean,
    required: true
  },
  //标题
  title: {
    type: String,
    default: '选择打印机'
  }
})

const emits = defineEmits(['close'])
const showSaveLoading = ref(false)

interface FromDataType {
  barcodePrint: string
  reportPrint: string
  pdfPrint: string
}

//条码打印机
const fromData = reactive<FromDataType>({
  barcodePrint: '',
  reportPrint: '',
  pdfPrint: ''
})

const printList = ref<Array<SeleteData>>([])

const clodopStatus = computed<CLodopStatus>(() => {
  return cLodopStore.getLodopStatus
})

//表单项
const fromItems = ref<Array<FromItem>>([
  {
    label: '条码打印机',
    prop: 'barcodePrint',
    placeholder: '请选择条码打印机',
    type: 'selete',
    seleteData: printList.value
  },
  {
    label: '报告打印机',
    prop: 'reportPrint',
    placeholder: '请选择报告打印机',
    type: 'selete',
    seleteData: printList.value
  },
  {
    label: 'PDF打印机',
    prop: 'pdfPrint',
    placeholder: '请选择PDF打印机',
    type: 'selete',
    seleteData: printList.value
  }
])

//表单清除控制
const resetFieldsFlag = ref(false)
const validateFlag = ref(false)

const onCancel = () => {
  emits('close')
}
const onConfirm = () => {
  validateFlag.value = !validateFlag.value
}

const onClose = () => {
  emits('close')
  //关闭后清除表单数据以及表单验证数据 可根据具体业务自行调整
  resetFieldsFlag.value = !resetFieldsFlag.value
}

//表单验证通过事件
const onSubmit = () => {
  cLodopStore.setLodopBarcode(fromData.barcodePrint)
  cLodopStore.setLodopReport(fromData.reportPrint)
  cLodopStore.setPdfReport(fromData.pdfPrint)
  ElMessage.success('保存成功')
  onCancel()
}

//初始化打印列表
const initPrintList = () => {
  let barcodeFlag = false
  let reportFlag = false
  let pdfFlag = false
  const arr = getPrintList()
  arr.forEach((item) => {
    if (item === fromData.barcodePrint) barcodeFlag = true
    if (item === fromData.reportPrint) reportFlag = true
    if (item === fromData.pdfPrint) pdfFlag = true
    printList.value.push({label: item, value: item})
  })
  if (!barcodeFlag) fromData.barcodePrint = ''
  if (!reportFlag) fromData.reportPrint = ''
  if (!pdfFlag) fromData.pdfPrint = ''
}

watch(clodopStatus, () => {
  if (clodopStatus.value === CLodopStatus.Ready) {
    initPrintList()
  }
})

onBeforeMount(() => {
  fromData.barcodePrint = cLodopStore.getBarcodePrint || ''
  fromData.reportPrint = cLodopStore.getReprotPrint || ''
  fromData.pdfPrint = cLodopStore.getPdfPrint || ''
  if (clodopStatus.value === CLodopStatus.Ready) {
    initPrintList()
  } else {
    showCLodopTips()
  }
})
</script>

<template>
  <d-dialog
    :title="title"
    :show-dialog="showDialog"
    :show-save-loading="showSaveLoading"
    @cancel="onCancel"
    @confirm="onConfirm"
    @close="onClose"
  >
    <d-from
      label-position="right"
      :label-width="100"
      :reset-fields-flag="resetFieldsFlag"
      :validate-flag="validateFlag"
      :form-data="fromData"
      :form-items="fromItems"
      :form-line-num="2"
      @submit="onSubmit"
    />
  </d-dialog>
</template>

<style scoped></style>
